import { type NativeProps } from '../../utils/native-props'

export type CheckboxValue = string | number

export type CheckboxProps = {
  /** 是否渲染为块级元素. default: `false` */
  block?: boolean
  /** 是否选中. default: - */
  checked?: boolean
  /** 默认是否选中. default: `false` */
  defaultChecked?: boolean
  /** 是否禁用. default: `false` */
  disabled?: boolean
  /** input 元素的 id，常用来配合 label 使用. default: - */
  id?: string
  /** 开启半选状态. default: `false` */
  indeterminate?: boolean
  /** 自定义 icon 图标. default: - */
  icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode
  /** 变化时回调函数. default: - */
  onChange?: (checked: boolean) => void
  /** 点击事件. default: - */
  onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void
  /** 选择框形状. default: `default` */
  shape?: 'default' | 'circle'
  /** 携带的标识值，用于 `Group` 模式. default: - */
  value?: CheckboxValue
  /** children */
  children?: React.ReactNode
} & NativeProps<
  /** 勾选图标的大小. default: `18px` */
  | '--icon-size'
  /** 右侧文字描述的大小. default: `12px` */
  | '--font-size'
  /** 图标和文字描述之间的间距. default: `8px` */
  | '--gap'
  /** 自定义图标高度. default: 24px */
  | '--custom-icon-height'
>

export type CheckboxRef = {
  /** 选中 */
  check: () => void
  /** 取消选中 */
  uncheck: () => void
  /** 切换 */
  toggle: () => void
  /** 获取状态 */
  getCheckState: boolean
}

export interface CheckboxGroupProps<T extends CheckboxValue[] = CheckboxValue[]> {
  /** 整组失效. default: `false`. 设置了整组不可用（disabled === `true`），`checkBox` 的 `disabled` 失效 */
  disabled?: boolean
  /** 默认选中的选项. default: `[]` */
  defaultValue?: T
  /** 变化时回调函数. default: - */
  onChange?: (val: T) => void
  /** 指定选中的选项. default: - */
  value?: T
  /** children */
  children?: React.ReactNode
}
